<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }

        .box {
            height: 200px;
            background: #000;
            color: white;
            text-align: center;
            line-height: 200px;
        }

        button {
            margin: auto;
            margin-top: 20px;
            display: block;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <button>取消防抖</button>
</body>
<script>
    /*
        防抖：就是指触发事件后 n 秒内函数只能执行一次，如果在 n 秒内又出发了事件，则会重新计算函数执行时间
        节流：就是指连续触发事件但是在一段事件中只能执行一次函数。
        css重绘：
        css回流：
    */

    // 防抖函数
    // function debounce(fn, wait) {
    //     let timmer = null;
    //     return function () {
    //         var now = !timmer;
    //         timmer && clearTimeout(timmer);
    //         timmer = setTimeout(() => { timmer = null; }, wait);
    //         if (now) {
    //             fn.apply(this, arguments);
    //         }
    //     }
    // }

    /* 
    防抖函数：
    应用场景： 
        1、scroll事件滚动触发
        2、搜索框输入查询
        3、表单验证
        4、按钮提交事件
        5、浏览器窗口缩放，resize事件
    */

    function debounce(func, wait, immediate) {
        let timeout, result;
        let decounced = function () {
            let context = this;
            let args = arguments;
            clearTimeout(timeout);
            if (immediate) {
                // 立即执行
                let callNow = !timeout;
                timeout = setTimeout(function () {
                    timeout = null;
                }, wait);
                if (callNow) result = func.apply(context, args);
            } else {
                // 不立即执行
                timeout = setTimeout(function () {
                    result = func.apply(context, args)
                }, wait);
            }
            return result;
        }
        decounced.cancel = function () {
            clearTimeout(timeout);
            timeout = null;
        }
        return decounced;
    }

    var box = document.querySelector('.box');
    var btn = document.querySelector('button');
    let doSome = debounce(move, 1000, false)
    box.onmousemove = doSome;

    btn.onclick = function () {
        doSome.cancel();
    }

    function move(ev) {
        console.log(this);
        console.log(ev);
        this.innerHTML = ev.clientX;
    }


</script>

</html>